<template>
    <div class="dictionary">
        <Tree :data="dictionaryList" :load-data="loadData" :render="renderContent"></Tree>
        <Modal
            :title="'修改 “'+oldVal+'” :'"
            @on-ok="renameSure"
            @on-cancel="renameNotSure"
            v-model="renameFlag"
            class="dictTree-vertical-center-modal"
        >
            <p style="marginBottom: 20px">
                <span style="color:red">*</span> 字典名：<Input v-model="renameVal" :maxlength="64" placeholder="请输入..." style="width: 300px"/>
            </p>
            <p>
                <span style="color:red">*</span> 字典值：<Input v-model="renameDictValue" :maxlength="200" placeholder="请输入字典值" style="width: 300px"/>
            </p>
            <div class="btn-group" style="textAlign: center; paddingTop: 20px;">
                <Button type="primary" style="marginLeft: 20px;width:56px;height:35px;" @click="renameSure" :disabled='disabledSave'>确认</Button>
                <Button style="marginLeft: 20px;width:56px;height:35px;" @click="renameNotSure">返回</Button>
            </div>
        </Modal>
        <Modal
            :title="'新增“'+oldVal+'”的下级:'"
            @on-ok="sure"
            @on-cancel="notSure"
            v-model="newFlag"
            class="dictTree-vertical-center-modal"
        >
            <p style="marginBottom: 20px">
                <span style="color:red">*</span> 字典名：<Input v-model="newVal" :maxlength="64" placeholder="请输入字典名" style="width: 300px"/>
            </p>
            <p>
                <span style="color:red">*</span> 字典值：<Input v-model="newDictValue" :maxlength="200" placeholder="请输入字典值" style="width: 300px"/>
            </p>
            <div class="btn-group" style="textAlign: center; paddingTop: 20px">
                <Button type="primary" style="marginLeft: 20px;width:56px;height:35px;" @click="sure" :disabled='disabledsure'>确认</Button>
                <Button style="marginLeft: 20px;width:56px;height:35px;" @click="notSure">返回</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { Tree } from "view-design";
import api from "@/api/commonApi";
export default {
    inject: ['reload'],
    data() {
        return {
            tmpRoot: null,
            tmpNode: null,
            tmpData: null,
            renameFlag: false,
            renameVal: "",
            oldVal: "",
            newFlag: false,
            newVal: "",
            newDictValue: '',
            loading: false,
            dictionaryList: [
                {
                    title: "字典",
                    expand: true,
                    loading: false,
                    top: true,
                    render: (h, { root, node, data }) => {
                        return h(
                            "span",
                            {
                                style: {
                                    display: "inline-block",
                                    width: "100%"
                                }
                            },
                            [
                                h("span", [
                                    h("Icon", {
                                        props: {
                                            type: "ios-folder-outline"
                                        },
                                        style: {
                                            marginRight: "8px"
                                        }
                                    }),
                                    h("span", data.title)
                                ]),
                                h(
                                    "span",
                                    {
                                        style: {
                                            display: "inline-block",
                                            marginLeft: "32px"
                                        }
                                    },
                                )
                            ]
                        );
                    },
                    children: []
                }
            ],
            buttonProps: {
                type: "default",
                size: "small"
            },
            disabledsure: false,
            disabledSave: false
        };
    },
    components: { Tree },
    created() {
        this.gettreelist()
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/configurationWarehouse/index",
                title: "配置仓"
            },
            {
                path: "/index/maintain/dictionary/tree",
                title: "基础字典"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    methods: {
        gettreelist() {
            let param = { dictLevel: 0 };
            this.$axios
                .post(api.getDictionList, param)
                .then(resp => {
                    if(resp.data.success){
                    let tmpData = resp.data.object;
                    tmpData.forEach((el, i) => {
                        let tmpObj = {};
                        tmpObj.title = el.dictName;
                        tmpObj.value = el.dictValue;
                        tmpObj.id = el.id;
                        tmpObj.dictType = el.dictType;
                        tmpObj.dictLevel = el.dictLevel;
                        tmpObj.dictSource = el.dictSource;
                        tmpObj.parentType = el.parentType;
                        if (el.num == 1) {
                            tmpObj.children = [];
                            tmpObj.loading = false;
                            tmpObj.expand = false;
                        }
                        this.dictionaryList[0].children.push(tmpObj);
                    });
                    }else{
                        this.$Message.info("不允许访问")
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        renderContent(h, { root, node, data }) {
            let addBtn = h(
                "Button",
                {
                    props: Object.assign({}, this.buttonProps, {
                        type: "default"
                    }),
                    style: {
                        marginRight: "8px"
                    },
                    on: {
                        click: () => {
                            this.append(data);
                        }
                    }
                },
                "新增"
            );
            if (
                (data.parentType == "KBA_HOSPITAL_LEVEL" && data.dictLevel == 1) ||
                (data.parentType == "KBA_DICT_TITLE" && data.dictLevel == 1) ||
                (data.parentType == "KBA_NATIONALITY" && data.dictLevel == 1) ||
                data.dictLevel == 2
            ) {
                addBtn = null;
            }
            return h(
                "span",
                {
                    style: {
                        display: "inline-block",
                        width: "100%"
                    }
                },
                [
                    h("span", [
                        h("Icon", {
                            props: {
                                type: "ios-paper-outline"
                            },
                            style: {
                                marginRight: "8px"
                            }
                        }),
                        h("span", data.title)
                    ]),
                    h(
                        "span",
                        {
                            style: {
                                display: "inline-block",
                                marginLeft: "16px"
                            }
                        },
                        [
                            addBtn,
                            h(
                                "Button",
                                {
                                    props: Object.assign({}, this.buttonProps, {
                                        type: "default"
                                    }),
                                    on: {
                                        click: () => {
                                            this.rename(root, node, data);
                                        }
                                    }
                                },
                                "修改"
                            )
                        ]
                    )
                ]
            );
        },
        append(data) {
            this.tmpData = data;
            this.oldVal = data.title;
            this.newVal = '';
            this.newDictValue = '';
            this.newFlag = true;
        },
        remove(root, node, data) {
            const parentKey = root.find(el => el === node).parent;
            const parent = root.find(el => el.nodeKey === parentKey).node;
            const index = parent.children.indexOf(data);
            parent.children.splice(index, 1);
        },
        rename(root, node, data) {
            console.log(data)
            console.log(3222234)
            this.tmpRoot = root;
            this.tmpNode = node;
            this.tmpData = data;
            this.oldVal = data.title;
            this.renameVal = data.title;
            this.renameDictValue = data.value;
            this.renameFlag = true;
        },
        renameSure() {
            this.disabledSave = true
            if (this.renameVal == "") {
                this.$Message.error("字典名不能为空");
                this.disabledSave = false
                return;
            }
            if (!this.renameDictValue) {
                this.$Message.error("字典值不能为空");
                this.disabledSave = false
            }
            let param = {};
            param.dictLevel = this.tmpData.dictLevel;
            param.dictName = this.renameVal.trim();
            param.dictValue = this.renameDictValue.trim();
            param.dictSource = this.tmpData.dictSource;
            param.dictType = this.tmpData.dictType;
            param.id = this.tmpData.id;
            param.parentType = this.tmpData.parentType;
            this.loading = true;
            this.$axios
                .post(api.newDiction, param)
                .then(resp => {
                    if (resp.data.success) {
                        const parentKey = this.tmpRoot.find(
                            el => el === this.tmpNode
                        ).parent;
                        const parent = this.tmpRoot.find(
                            el => el.nodeKey === parentKey
                        ).node;
                        const index = parent.children.indexOf(this.tmpData);
                        parent.children[index].title = this.renameVal;
                        this.renameFlag = false;
                        setTimeout(() => {
                            this.disabledSave = false
                        }, 1000);
                        this.reload()
                    } else {
                        this.$Message.info(resp.data.message);
                        setTimeout(() => {
                            this.disabledSave = false
                        }, 1000);
                    } 
                })
                .catch(error => {
                    setTimeout(() => {
                        this.disabledSave = false
                    }, 1000);
                });
        },
        renameNotSure() {
            this.renameFlag = false;
        },
        sure() {
            this.disabledsure = true
            if (this.newVal == "") {
                this.$Message.error("字典名不能为空");
                 this.disabledsure = false
                return;
            }
            if (!this.newDictValue) {
                this.$Message.error("字典值不能为空");
                 this.disabledsure = false
                return;
            }
            let top = this.tmpData.top;
            let param = {};
            param.dictLevel = this.tmpData.dictLevel + 1;
            param.dictName = this.newVal.trim();
            param.dictValue = this.newDictValue.trim();
            param.dictSource = this.tmpData.dictSource;
            param.dictType = "";
            param.id = null;
            param.parentType = this.tmpData.dictType;
            this.loading = true;
            this.$axios
                .post(api.newDiction, param)
                .then(resp => {
                    if (resp.data.success) {
                        let tmpObj = resp.data.object;
                        console.log(tmpObj)
                        const children = this.tmpData.children || [];
                        children.push({
                            dictLevel: tmpObj.dictLevel,
                            dictName: tmpObj.dictName,
                            dictSource: tmpObj.dictSource,
                            dictType: tmpObj.dictType,
                            id: tmpObj.id,
                            parentType: tmpObj.parentType,
                            title: this.newVal,
                            expand: true
                        });
                        this.$set(this.tmpData, "children", children);
                        this.loading = false;
                        this.newFlag = false;
                        this.disabledsure = false
                        this.$Message.info("添加成功");
                        this.reload()
                    } else {
                        this.$Message.info(resp.data.message);
                        this.disabledsure = false
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    }
                })
                .catch(error => {
                    this.disabledsure = false
                });
        },
        notSure() {
            this.newFlag = false;
        },
        loadData(item, callback) {
            console.log('sss')
            let param = { parentType: item.dictType };
            this.$axios
                .post(api.getDictionList, param)
                .then(resp => {
                    if(resp.data.success){
                    let tmpData = resp.data.object;
                    let tmpArr = [];
                    if (tmpData.length > 0) {
                        tmpData.forEach((el, i) => {
                            let tmpObj = {};
                            tmpObj.title = el.dictName;
                            tmpObj.value = el.dictValue;
                            tmpObj.id = el.id;
                            tmpObj.dictType = el.dictType;
                            tmpObj.dictLevel = el.dictLevel;
                            tmpObj.dictSource = el.dictSource;
                            tmpObj.parentType = el.parentType;
                            if (el.num == 1) {
                                tmpObj.children = [];
                                tmpObj.loading = false;
                                tmpObj.expand = false;
                            }
                            tmpArr.push(tmpObj);
                        });
                        callback(tmpArr);
                    } else {
                        item.expand = "";
                        item.loading = "";
                        callback(tmpArr);
                    }
                    }else{
                        this.$Message.info("不允许访问")
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        }
    },
};
</script>
<style lang="less" scoped>
.dictionary {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
}
.dictTree-vertical-center-modal {
    /deep/ .ivu-modal-footer {
        display: none;
    }
}
</style>